<template>
	<view class="content">
		<!-- 顶部tabs -->
		<view class="tabsr">
			<tabs :tabsList="useCustomer.tabsList" @tabsClick="tabsClick" :tabCurrent="useCustomer.tabCurrent" @handleOne="handleOne"></tabs>
		</view>
		<!-- 顶部tabs -->
		
		<view style="height: 1rpx; width: 100%;"></view>
		
		<!-- 订单列表 -->
		<view class="order_ul">
			<view v-if="useCustomer.listData.length>0">
				<orderList :listData="useCustomer.listData"></orderList>
			</view>
			
			<!-- 默认刷新 -->
			<view v-if="useCustomer.loadingType==0" style="padding: 20rpx 0;">
				<u-loadmore :status="'loading'" />
			</view>
			
			<!-- 没数据 -->
			<view v-else-if="useCustomer.listData.length==0 && useCustomer.loadingType==2" style="padding: 20rpx 0;">
				<nullstate></nullstate>
			</view>
			
			<!-- 重新计算 -->
			<view class="address_bus" v-if="useCustomer.tabCurrent==0">
				<view class="btn one" @click="dtClick">查看地图</view>
				<view class="btn two" @click="planningClick">重新规划路线</view>
			</view>
			<!-- 重新计算 end-->
		</view>
		<!-- 订单列表 end-->
		
		<!-- 定位权限 -->
		<locationLimits></locationLimits>
		<!-- 定位权限 -->
		
		<!--加载框 start-->
		<loading :visible="useCustomer.loadingTrue" :show="false"></loading>
		<!--加载框 end-->
		
		<!-- 日期弹窗 -->
		<u-datetime-picker
			:show="dateShow"
			v-model="useCustomer.dateValue"
			mode="date"
			:formatter="formatter"
			:minDate="minDateData"
			:maxDate="maxDateData"
			closeOnClickOverlay
			@close="dateShow=false"
			@cancel="dateShow=false"
			@confirm="confirmClick"
		></u-datetime-picker>
		<!-- 日期弹窗 end-->

	</view>
</template>

<script setup>
	import { ref } from "vue"
	import {onLoad,onBackPress} from "@dcloudio/uni-app"
	//订单列表
	import orderList from "./components/orderList.vue";
	
	//跳转判断
	import {outerHref} from '@/composables/outerHref.js'
	
	//引入用户相关的小仓库
	import useCustomerStore from '@/store/customer.js'
	const useCustomer = useCustomerStore()
	
	//引入用户相关的小仓库
	import useUserStore from '@/store/user.js'
	const UserStore = useUserStore()
	
	//默认日期弹窗
	const dateShow=ref(false);
	const minDateData=ref(Date.parse(new Date(new Date().getTime() - (24 * 60 * 60 * 1000))));
	const maxDateData=ref(Date.parse(new Date(new Date().getTime() + (24 * 60 * 60 * 1000))));
	
	//tab点击出发
	function tabsClick(e){
		useCustomer.tabCurrent=e.index;
		if(e.index==0){//我的订单
			if(!useCustomer.listTrue){ //不刷新列表数据开关
				useCustomer.addressFun();
			}else{
			useCustomer.listData=useCustomer.listBuData;
			}
		}else{
			// useCustomer.listBuData=useCustomer.listData;
			useCustomer.listData=[];
			useCustomer.loadingType = 0;
			useCustomer.postOrderListFun(0,0,1);
		}
	}
	
	//日期确认
	function confirmClick(e){
		console.log(e,'e')
		useCustomer.dateValue=e.value;	
		useCustomer.listData=[];
		useCustomer.loadingType=0;
		dateShow.value=false;
		
		//重新规划路线
		useCustomer.addressFun();
	}
	
	//重新规划路线
	function planningClick(){
		useCustomer.tabsList=[{name: '配送中'},{name: '已完成'}];
		useCustomer.loadingType = 0;
		useCustomer.addressFun();
	}
	
	//日期选择
	function handleOne(){
		dateShow.value=true;
	}
	
	//日期格式
	function formatter(type, value) {
		if (type === 'year') {
				return `${value}年`
		}
		if (type === 'month') {
				return `${value}月`
		}
		if (type === 'day') {
				return `${value}日`
		}
		return value
	}
	
	
	//查看地图
	function dtClick(){
		//#ifdef H5
		outerHref('/pagesA/pages/maps/mapsOrder?lat=29.58787&long=106.544317')
		// #endif 
		
		//#ifdef MP-WEIXIN || APP-PLUS
		UserStore.addressGetLocation((res,bloo)=>{
			if(bloo){ //定位成功
				console.log(res,'定位数据')
				// let address=res.address.province+res.address.district+res.address.street+res.address.poiName;
				// postOrderStoreLocationFun(item.id,parseFloat(res.latitude).toFixed(8),parseFloat(res.longitude).toFixed(8),address);
				
				outerHref('/pagesA/pages/maps/mapsOrder?lat='+parseFloat(res.latitude).toFixed(6)+'&long='+parseFloat(res.longitude).toFixed(6))
			}else{ //定位失败
				uni.showToast({title: '定位失败!',icon:'none'});
				useCustomer.loadingTrue=false;
			}
		})
		// outerHref('/pagesA/pages/maps/mapsOrder')
		// #endif 
	}
	
	onLoad((res)=>{
		if(!useCustomer.listTrue){ //不刷新列表数据开关
			useCustomer.addressFun();
		}
		if(useCustomer.tabCurrent==1){
			useCustomer.listData=[];
			useCustomer.loadingType = 0;
			useCustomer.postOrderListFun(0,0,1);
		}
		
		// uni.request({
		// 	url: 'https://restapi.amap.com/v3/assistant/coordinate/convert?parameters',
		// 	data: {
		// 		'key':'4c182cccd0bc5a33388f06dd1e8de137',
		// 		'locations':'106.579835,29.626478',
		// 		'coordsys':'gps'
		// 	},
		// 	method: 'get',
		// 	header:{
		// 		'Content-Type': 'application/json',
		// 		'Accept':'application/json',
		// 	},
		// 	success: (response) => {
		// 		console.log(response,'坐标')
		// 	},
		// 	fail: (error) => {
		// 		reject(error);
		// 	}
		// })
		
		// uni.request({
		// 	url: 'https://restapi.amap.com/v5/direction/driving?parameters',
		// 	data: {
		// 		'key':'4c182cccd0bc5a33388f06dd1e8de137',
		// 		'origin':'106.544267,29.587799',
		// 		'destination':'106.525567,29.581550',
		// 	},
		// 	method: 'get',
		// 	header:{
		// 		'Content-Type': 'application/json',
		// 		'Accept':'application/json',
		// 	},
		// 	success: (response) => {
		// 		console.log(response,'导航')
		// 	},
		// 	fail: (error) => {
		// 		reject(error);
		// 	}
		// })
	})
	
	//物理返回判断
	onBackPress((res)=>{
		
		if(useCustomer.showOne){
			useCustomer.showOne=false;
			return true; // 此处返回 true 表示阻止页面跳转或关闭
		}
		
	})
	
</script>

<style lang="scss" scoped>
page,.content{
	background: #F5F5F5;
	// background: #fff;
	
	//#ifdef H5 
	min-height: calc((100vh - 94px));
	// #endif 
	
	//#ifdef MP-WEIXIN || APP-PLUS
	min-height: 100vh;
	// #endif 
}
.tabsr{
	position: fixed;
	//#ifdef H5 
	top: 44px;
	// #endif 
	
	//#ifdef MP-WEIXIN || APP-PLUS
	top: 0px;
	// #endif 	
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 0 16rpx 0 rgba(0,0,0,0.05);
	z-index: 99;
}
.order_ul{
	margin-top: 120rpx;
	padding-bottom: 120rpx;

}

.address_bus{
	position: fixed;
	left: 30rpx;
	bottom: 30rpx;
	right: 30rpx;
	height: 80rpx;
	display: flex;
	flex-direction: row;
	z-index: 96;
	justify-content: space-between;
	.btn{
		height: 80rpx;
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 18rpx 0 rgba(36,113,196,0.28);
		border-radius: 20rpx;
		background-color: #16BB5D;
		color: #fff;
		transition: 0.3s all;
	}
	.btn.one{
		transition: 0.3s all;
		width: 26%;
		background-image: repeating-linear-gradient(
		45deg, #FEA921, #FF8331);
	}
	.btn.one:active{
		background-image: repeating-linear-gradient(
		45deg, #FF8331, #FEA921);
	}
	.btn.two{
		transition: 0.3s all;
		width: 70%;
		background-image: repeating-linear-gradient(
		45deg, #FF3181, #FF8331);
	}
	.btn.two:active{
		background-image: repeating-linear-gradient(
		45deg, #FF8331, #FF3181);
	}
}

</style>
